{{#>base title=data.page.datatables}}

    {{#*inline "pageContent"}}
        <div class="row">
            <div class="col-md-12">
                <h3 class="page-title">
                    {{data.page.datatables}}
                </h3>

                <div class="tabs-wrap">
                    <ul  class="nav nav-tabs">
                        <li>
                            <a href="datatable.html" >基础 </a>
                        </li>
                        <li>
                            <a href="datatable-extend.html" >细分</a>
                        </li>
                        <li>
                            <a href="datatable-summary.html" >汇总</a>
                        </li>
                        <li class="active">
                            <a href="datatable-search.html" >搜索</a>
                        </li>
                        <li>
                            <a href="datatable-toolbar.html">工具栏</a>
                        </li>
                        <li>
                            <a href="datatable-options.html" >参数说明</a>
                        </li>
                    </ul>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">

                <div class="table-toolbar">
                    <div class="input-icon input-search">
                        <i class="fa fa-search"></i>
                        <input placeholder="查询关键字" id="txt_search" class="form-control" maxlength="1024" type="text">
                    </div>
                </div>

                <table id="my_table"></table>

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <h3>说明</h3>
                <ol>
                    <li>在oSearch中设置sInput,搜索文本框的选择器，例如：#txt_search</li>
                    <li>在oSearch中设置sParamName,请求参数名称;</li>
                </ol>

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">

                <div class="markdown">

                    <h3>HTML代码</h3>
<pre><code class="html">&lt;input placeholder=&quot;查询关键字&quot; id=&quot;txt_search&quot; class=&quot;form-control&quot; maxlength=&quot;1024&quot; type=&quot;text&quot;&gt;
&lt;table id=&quot;my_table&quot;&gt;&lt;/table&gt;</code></pre>
                    <h3>Javascript代码</h3>
<pre><code class="javascript">require('../../plugins/datatables/module');
$p.dataTable("#my_table", {
    "fnDataSource": model.getDataList,
    "sClass": "table-fixed",
    "aaSorting": [
        [2, "desc"]
    ],
    "oSearch": {
        "sInput": "#txt_search",
        "sParamName": "word"
    },
    "fnParams": function() {
        return {};
    },
    "aoColumns": [{
        "bSortable": false,
        "mData": "keywords",
        "sTitle": "关键字"
    }, {
        "sTitle": "搜索引擎",
        "mData": "searchEngine"
    }, {
        "bShowSummary":true,
        "sClass": "t-a-r",
        "sTitle": "浏览量(PV)",
        "mData": "pageViews"
    }, {
        "sClass": "t-a-r",
        "bShowSummary":true,
        "sTitle": "独立访问者(UV)",
        "mData": "uniqueVisitors"
    }, {
        "sClass": "t-a-r",
        "bShowSummary":true,
        "sTitle": "访问次数(VV)",
        "mData": "visitViews"
    }]
});</code></pre>

                    <h3>JSON 数据</h3>
                    <a href="/test/api/keywords.json" target="_blank">keywords.json</a>

                    <h3>基于版本</h3>
                    <p>[v1.9.4]</p>

                    <h3>更多实例</h3>

                    <a href="http://legacy.datatables.net/examples/" target="_blank">
                        http://legacy.datatables.net/examples/
                    </a>


                </div>


            </div>

        </div>
    {{/inline}}

    {{#*inline "appScript"}}
        <script type="text/javascript">
            pagurian.call("modules/datatable/app", function(app) {
                app.page.dataTableSearch();
            });
        </script>
    {{/inline}}

{{/base}}
